<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>背景</title>
</head>
<style>
div {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    float: right;
}
</style>

<body>
    <!-- /* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset; 

repeat:repeat-x repeat-y repeat 按需覆盖，最后一个会被裁剪； space尽可能的重复，第一个和最后一个固定在相应的边上
round 拉伸。。。 no-repeat 不会重复 
background-attachment:固定还是滚动 scroll fixed local inherit
background-clip:背景图片或者颜色是否延伸到边框下面 border-box padding-box content-box 
inherit



-->
    <div style="background: url(zhy.jpg)"></div>
    <div style="background: url(zhy.jpg) no-repeat"></div>
    <div style="background: url(zhy.jpg) no-repeat 20px 20px;"></div>
    <div style="background: url(zhy.jpg) no-repeat bottom 20px right 20px,url(zhy.jpg) no-repeat 20px 20px;"></div>
    <div style="background:red url(zhy.jpg) no-repeat "></div>
    <div style="background: linear-gradient(to right,red, blue)"></div>
    <div style=""></div>
</body>

</html>